<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <link href="images/favicon1.ico" rel="icon" type="image/x-icon"/>
    <link href="images/favicon1.ico" rel="shortcut icon" type="image/x-icon"/>
    <title>OA办公自动化系统</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <style>
        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }
        /*
                .btn {
                    display: inline-block;
                    box-sizing: border-box;
                    border: 1px solid #cccccc;
                    border-radius: 2px;
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    color: #666;
                    cursor: pointer;
                    background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
                } */

        .btn:hover {
            background: #3c83a5;
            color:#fff;
        }

        #captcha {
            width: 300px;
            display: inline-block;
        }

        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        #wait {
            text-align: left;
            color: #666;
            margin: 0;
        }
        .thisimg:HOVER {
            cursor: pointer;
        }
        .test:FOCUS {
            border-color: #66afe9 !important;
        }
        .modal-dialog {
            width: 500px;
        }

        .modal-body .icon {
            height: 80px;
            width: 80px;
            margin: 20px auto;
            border-radius: 50%;
            color: #aad6aa;
            border: 3px solid #d9ead9;
            text-align: center;
            font-size: 44px;
        }

        .modal-body .icon .glyphicon {
            top: 11px;
        }

        .modal-p {
            margin: 20px auto;
        }

        .modal-body .modal-p h2 {
            text-align: center;
        }

        .modal-body .modal-p p {
            text-align: center;
            color: #666;
            font-size: 16px;
            padding-top: 8px;
            font-weight: 300;
        }

        .modal-p .btn {
            width: 100px;
            height: 40px;
        }
        .modal-error .icon{
            color: #f27474;
            border: 3px solid #f27474;
    </style>
</head>

<body>
<div class="cotn_principal">
    <div class="cont_centrar" style="top:5%;">
        <div class="cont_login">
            <div class="cont_forms cont_forms_active_login" style="height: 480px;width: 400px;border-radius: 15px;">
                <div class="cont_img_back_"> <img src="images/timg.jpeg" alt="背景图片" /> </div>
                <form action="logins" method="post" id="ssss">
                    <div class="cont_form_login" style="display: block;opacity: 1;width: 400px;">
                    <#--用于消息验证后的处理-->
                    <#--<div class="alert alert-danger alert-dismissible"  role="alert" style="position: absolute;padding: 11px;display: none">-->
                    <#--错误信息: <span class="error-mess"></span>-->
                    <#--<button type="button" class="close" data-dismiss="alert" aria-label="Close" style="right:0px;"><span aria-hidden="true">&times;</span></button>-->
                    <#--</div>-->

                        <h2>LOGIN</h2>
                    <#--根据用户名和密码进行登录-->
                        <input type="text" placeholder="请输入姓名" autofocus="autofocus"  name="userName"  class="userName test"/>
                        <input type="password" placeholder="请输入密码" value="" name="password" class="password test"/>

                    <#--验证码登录-->
                        <input type="text" placeholder="Code" style="margin-bottom: 20px;width:152px" name="code" class="code test"/>
                        <div class="login-img" style="display:inline-block">      <#--每点击一次当前图片重新生成一个验证码-->
                            <img class="thisimg" onclick="this.src='captcha?r'+Date.now()" src="captcha" alt="验证码" style="width: 100px;height: 42px;border-radius: 3px;">
                        </div>
                        <button class="btn_login btn" type="button" id="aaa" >LOGIN</button>
                </form>
            </div>

        </div>
        <div style="border: 1px solid transparent;">
            <p style="margin-top: 550px;font-weight: 400;color: #757575;font-size: 22px;letter-spacing:1px ;">欢迎使用OA办公自动化系统</p>
        </div>
    </div>

</div>
</div>

<!-- /.modal -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>

<#--用于验证验证码输入是否正确-->
<script >
    $(function(){
        $("#aaa").click(function(){
            var code=$("[name=code]").val();
            $.ajax({
                url:"checkcode?code="+code,
                success:function(data){
                    if(data=="ok"){
                        var parems= $("#ssss").serialize();
                        alert(parems)
                        $.ajax({
                            url:"getByNameAndPassword",
                            data: parems,
                            dataType:"json",
                            async: false,
                            success:function(data){
                                if(data!=null){
                                    location.href="index";
                                }else {
                                    alert("密码或账号有误，请重新登录");
                                    location.href="login";
                                }
                            },error(){
                                alert("ajax错了");
                            }
                        })
                    }else{
                        alert("验证码错误,请重新输入");
                    }
                }
            })
        })
    })


</script>
</body>
</html>
